<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>账户管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改密码</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 标题头 -->
      <div class="clearfix title">
        <span class="title-text">修改密码 </span>
      </div>
      <!-- 修改密码表单 -->
      <el-form
        ref="form" 
        :model="changePasswordForm"
        label-width="80px"
      >
        <el-form-item label="当前密码">
          <el-input v-model="changePasswordForm.oldPassword"></el-input>
        </el-form-item>

        <el-form-item label="新密码">
          <el-input v-model="changePasswordForm.newPassword"></el-input>
        </el-form-item>

        <el-form-item label="确认密码">
          <el-input v-model="changePasswordForm.rePassword"></el-input>
        </el-form-item>

        <!-- 按钮框 -->
        <el-form-item class="btns">
          <el-button type="primary" plain size="mini" @click="submitForm"
            >提交</el-button
          >
          <el-button type="info" plain size="mini" @click="cancelForm"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 调用修改密码接口
import { getChangePassword } from "network/account";
export default {
  name: "ChangePassword",

  data() {

    // 确认密码验证规则
    var rePasswordRules = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.changePasswordForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      changePasswordForm: {
        oldPassword: "",
        newPassword: "",
        rePassword: "",
      },

      // 验证密码rule
      changePasswordRules: {
        rePassword: [{ validator: rePasswordRules, trigger: "blur" }],
      },
    };
  },

  methods: {
    // 提交表单函数
    submitForm() {
      
      let formdataSee = new FormData();
      formdataSee.append("userIdTel", this.$store.state.UserTelId);
      formdataSee.append("userPassword",this.changePasswordForm.rePassword)
      getChangePassword(formdataSee).then(res=>{
        console.log(res);
      })

      alert("提交修改密码");
      
    },

    // 取消修改密码表单
    cancelForm() {
      this.$confirm("是否取消修改密码", "取消", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //点击确认返回到首页
        .then(() => {
          this.$router.push("/userwelcome");
        })
        // 取消操作，不做任何处理
        .catch(() => {});
    },
  },
};
</script>

<style lang="less">
.box-card {
  .title {
    height: 40px;
    line-height: 40px;
  }
  .title-text {
    font-size: larger;
    font-weight: bolder;
    display: block;
    text-align: center;
  }

  .el-form {
    margin-top: 8%;
    margin-bottom: 8%;
  }

  .el-form-item {
    margin-left: 16%;
    margin-right: 16%;
  }
}
</style>